<template>
	<el-card shadow="never">
		<el-form>
			<el-row :gutter="12">
				<el-col :span="8">
					<el-form-item label="学员姓名">
						<el-input placeholder="请输入学员姓名" v-model="searchForm.selectName"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="学员电话">
						<el-input placeholder="请输入学员电话" v-model="searchForm.mobile"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="起止时间">
						<el-date-picker v-model="timeRange" type="daterange" start-placeholder="开始时间"
							end-placeholder="截止时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-button @click="getConsultAllData" type="primary" icon="Search">搜索</el-button>
					<el-button @click="resetForm" icon="RefreshRight">重置</el-button>

					<el-popover :disabled="popDisabled" trigger="click" placement="top-start" :width="360">
						<el-alert :closable="false" style="margin-bottom: 5px;">为了您正确使用导入功能，请先下载Excel模板。</el-alert>
						<div style="display: flex;justify-content: space-around;">
							<el-button type="primary" icon="Download" @click="downloadModel">下载模板</el-button>
							<el-upload :headers="headers" :http-request="upload">
								<el-button type="primary" icon="Upload">上传</el-button>
							</el-upload>
						</div>
						<template #reference>
							<el-button @click="popDisabled = false" icon="Upload">导入</el-button>
						</template>
					</el-popover>

					<el-button icon="Download" @click="exportRecruit">导出</el-button>
				</el-col>
			</el-row>
		</el-form>
	</el-card>
	<el-card style="margin-top: 10px;" shadow="never">
		<el-button @click="$router.push('/recruit/consult/add')" type="primary" icon="Plus"
			style="margin-bottom: 5px;">新建咨询</el-button>
		<XlxClientTable v-model:currentPage="searchForm.current" v-model:pageSize="searchForm.size" :data="consultList"
			type="index" :totals="totals" @getData="getConsultAllData">
			<template #="{ row }">
				<el-link type="primary" icon="List" :underline="false"
					@click="$router.push({ path: '/recruit/consult/detail', query: { id: row.id } })">查看详情</el-link>
				<el-link type="success" icon="Avatar" :underline="false">办理报名</el-link>
				<el-link type="danger" icon="Edit" :underline="false">跟进信息</el-link>
				<el-link type="warning" icon="Edit" :underline="false" @click="editRecruit(row.id)">编辑信息</el-link>
			</template>
		</XlxClientTable>
		<updataDialog v-model="updataDialogVisible" :id="clientId" @addSuccess="getConsultAllData"></updataDialog>
	</el-card>
</template>

<script setup lang="ts">
import { getConsultAllApi, postConsultExport, postConsultImport } from '@renderer/api/recruit';
import { RecruitItem, SearchRecruit } from '@renderer/interface/recruit';
import { UploadRequestHandler } from 'element-plus';
import { onMounted, ref } from 'vue';
import updataDialog from './all/updataDialog.vue'

/* 全部客户：表格 */
const searchForm = ref<SearchRecruit>({
	size: 5,
	current: 1,
	selectName: '',
	mobile: '',
	startTime: '',
	endTime: ''
})
const totals = ref(0)
const timeRange = ref<any>([])
const consultList = ref<RecruitItem[]>([])
const getConsultAllData = async () => {
	searchForm.value.startTime = timeRange.value[0]
	searchForm.value.endTime = timeRange.value[1]
	const { code, data } = await getConsultAllApi(searchForm.value)
	if (code !== '200') return

	consultList.value = data.records
	totals.value = data.total
}
// 重置表单
const resetForm = () => {
	searchForm.value = {
		size: 5,
		current: 1,
		selectName: '',
		mobile: '',
		startTime: '',
		endTime: ''
	}
	getConsultAllData()
}

const popDisabled = ref(false)
// 导入文件的headers
const headers = { 'Content-Type': 'mutipart/form-data' }
// 下载模板
const downloadModel = () => {
	popDisabled.value = true
	const modelUrl = "https://oss.xuexiluxian.cn/xiaoluxian-crm/2023-07-17/1659133900536107008.xlsx"
	if (modelUrl) {
		window.electron.ipcRenderer.invoke('renderer-to-main', {
			name: 'download-http-file',
			data: {
				url: modelUrl
			}
		})
	}
}
// 上传
const upload: UploadRequestHandler = async (options) => {
	// 关闭pop框
	popDisabled.value = true
	// 新建一个formData文件
	const formData = new FormData()
	// 添加文件
	formData.append('file', options.file)
	// 发送请求
	const { code } = await postConsultImport(formData)
	if (code !== '500') return

	getConsultAllData()
}
// 导出
const exportRecruit = async () => {
	const { code } = await postConsultExport()
	if (code !== '200') return

	ElMessage.success('导出成功~')
}

// 编辑信息
const updataDialogVisible = ref(false)
const clientId = ref('')
const editRecruit = (id: string) => {
	clientId.value = id
	updataDialogVisible.value = true
}

onMounted(() => {
	getConsultAllData()
})
</script>

<style scoped></style>